<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./public/css/activity.css">
	<link rel="stylesheet" href="./public/css/common.css">
	<link rel="stylesheet" href="./public/css/message.min.css">
</head>

<body>
	<div id="header"></div>
	<div id="right"></div>
	<div id="container">
		<!-- 近期活动 -->
		<section class="column-section">
			<div class="column-header">
				<h2>近期活动</h2>
				<span>RECENT ACTIVITIES</span>
				<div class="line"></div>
			</div>
			<main class="activity-main">
				<!-- 活动列表 -->
				<div class="activity-grid">
					<div class="activity-col">
						<div class="activity-card">
							<img class="activity-image" src="http://img.tongmen.cdn.dgyunju.cn/202002140444584458228_b-1679554709.jpg"
								alt="2023年春季技术大会">
							<h3 class="activity-name">2023中国进出口商品交易会（广交会）2023中国进出口商品交易会（广交会）</h3>
							<ul class="activity-details">
								<li class="activity-detail">开始时间: 2023-03-15 09:00</li>
								<li class="activity-detail">结束时间: 2023-03-16 17:00</li>
								<li class="activity-detail"> 会议地址：广交会展馆</li>
								<li class="activity-detail">展号位：A12</li>
							</ul>
						</div>
					</div>

					<div class="activity-col">
						<div class="activity-card">
							<img class="activity-image" src="http://img.tongmen.cdn.dgyunju.cn/202002140444584458228_b-1679554709.jpg"
								alt="前端开发技术研讨会">
							<h3 class="activity-name">2023中国进出口商品交易会（广交会）</h3>
							<ul class="activity-details">
								<li class="activity-detail">开始时间: 2023-04-20 10:00</li>
								<li class="activity-detail">结束时间: 2023-04-20 16:00</li>
								<li class="activity-detail"> 会议地址：广交会展馆</li>
								<li class="activity-detail">展号位：B05</li>
							</ul>
						</div>
					</div>

					<div class="activity-col">
						<div class="activity-card">
							<img class="activity-image" src="http://img.tongmen.cdn.dgyunju.cn/202002140444584458228_b-1679554709.jpg"
								alt="云计算与大数据峰会">
							<h3 class="activity-name">2023中国进出口商品交易会（广交会）</h3>
							<ul class="activity-details">
								<li class="activity-detail">开始时间: 2023-05-10 08:30</li>
								<li class="activity-detail">结束时间: 2023-05-12 18:00</li>
								<li class="activity-detail"> 会议地址：广交会展馆</li>
								<li class="activity-detail">展号位：C08</li>
							</ul>
						</div>
					</div>

					<div class="activity-col">
						<div class="activity-card">
							<img class="activity-image" src="http://img.tongmen.cdn.dgyunju.cn/202002140444584458228_b-1679554709.jpg"
								alt="DevOps技术大会">
							<h3 class="activity-name">2023中国进出口商品交易会（广交会）</h3>
							<ul class="activity-details">
								<li class="activity-detail">开始时间: 2023-06-05 09:30</li>
								<li class="activity-detail">结束时间: 2023-06-06 17:00</li>
								<li class="activity-detail"> 会议地址：广交会展馆</li>
								<li class="activity-detail">展号位：D15</li>
							</ul>
						</div>
					</div>
				</div>

				<!-- 分页 -->
				<div id="pagination" class="l-page"></div>

				<!-- 报名表单 -->
				<form class="activity-form">
					<h2>活动报名</h2>
					<div class="line"></div>
					<div class="all-group">
						<div class="form-group">
							<label class="form-label">所在地区</label>
							<div class="form-control">
								<div class="el-cascader">
									<input type="text" placeholder="请选择所在地区" class="el-input__inner">
								</div>
							</div>
						</div>

						<div class="form-group">
							<label class="form-label">活动选择</label>
							<div class="form-control">
								<div class="el-select">
									<select class="el-input__inner">
										<option value="" selected disabled>请选择活动</option>
										<option value="1">2023年春季技术大会</option>
										<option value="2">前端开发技术研讨会</option>
										<option value="3">云计算与大数据峰会</option>
										<option value="4">DevOps技术大会</option>
									</select>
								</div>
							</div>
						</div>

						<div class="form-group">
							<label class="form-label">公司/学校</label>
							<div class="form-control">
								<input type="text" class="el-input__inner" placeholder="请填写公司/学校">
							</div>
						</div>

						<div class="form-group">
							<label class="form-label">姓名</label>
							<div class="form-control">
								<input type="text" class="el-input__inner" placeholder="请填写姓名">
							</div>
						</div>

						<div class="form-group">
							<label class="form-label">手机</label>
							<div class="form-control">
								<input type="text" class="el-input__inner" placeholder="请填写手机">
							</div>
						</div>

						<div class="form-group">
							<label class="form-label">座机</label>
							<div class="form-control">
								<input type="text" class="el-input__inner" placeholder="请填写座机">
							</div>
						</div>

						<div class="form-group">
							<label class="form-label">微信</label>
							<div class="form-control">
								<input type="text" class="el-input__inner" placeholder="请填写微信">
							</div>
						</div>

						<div class="form-group">
							<label class="form-label">QQ</label>
							<div class="form-control">
								<input type="text" class="el-input__inner" placeholder="请填写QQ">
							</div>
						</div>

						<div class="form-group">
							<label class="form-label">邮箱</label>
							<div class="form-control">
								<input type="text" class="el-input__inner" placeholder="请填写邮箱">
							</div>
						</div>
					</div>

					<div class="form-submit">
						<button type="button" id="formBtn" class="el-button el-button--primary">
							<span>确认报名</span>
						</button>
					</div>
				</form>
			</main>
			<!-- 弹窗遮罩 -->
			<div class="modal-mask" style="display: none;" id="joinModal">
				<div class="modal-container">
					<div class="modal-title">报名</div>

					<!-- 报名表单 -->
					<div class="apply-form-container" id="applyForm">
						<!-- 所在地区 -->
						<div class="form-row" data-field="address">
							<label class="form-label">所在地区</label>
							<div class="select-all">
								<select class="select-one" id="prov">
									<option>=请选择省份=</option>
								</select>
								<!--城市选择-->
								<select class="select-one" id="city">
									<option>=请选择城市=</option>
								</select>
								<!--县区选择-->
								<!-- <select class="select-one"  id="country" onchange="selecCountry(this)">
								<option>=请选择县区=</option>
						</select> -->
							</div>
						</div>

						<!-- 公司/学校 -->
						<div class="form-row" data-field="company">
							<label class="form-label">公司/学校</label>
							<div class="form-control">
								<div class="el-input">
									<input type="text" class="el-input__inner" placeholder="请填写公司/学校">
								</div>
								<div class="error-message"></div>
							</div>
						</div>

						<!-- 姓名 -->
						<div class="form-row" data-field="name">
							<label class="form-label">姓名</label>
							<div class="form-control">
								<div class="el-input">
									<input type="text" class="el-input__inner" placeholder="请填写姓名">
								</div>
								<div class="error-message"></div>
							</div>
						</div>

						<!-- 手机 -->
						<div class="form-row" data-field="phone">
							<label class="form-label">手机</label>
							<div class="form-control">
								<div class="el-input">
									<input type="text" class="el-input__inner" placeholder="请填写手机">
								</div>
								<div class="error-message"></div>
							</div>
						</div>

						<!-- 座机 -->
						<div class="form-row" data-field="tel">
							<label class="form-label">座机</label>
							<div class="form-control">
								<div class="el-input">
									<input type="text" class="el-input__inner" placeholder="请填写座机">
								</div>
								<div class="error-message"></div>
							</div>
						</div>

						<!-- 微信 -->
						<div class="form-row" data-field="wechat">
							<label class="form-label">微信</label>
							<div class="form-control">
								<div class="el-input">
									<input type="text" class="el-input__inner" placeholder="请填写微信">
								</div>
								<div class="error-message"></div>
							</div>
						</div>

						<!-- QQ -->
						<div class="form-row" data-field="qq">
							<label class="form-label">QQ</label>
							<div class="form-control">
								<div class="el-input">
									<input type="text" class="el-input__inner" placeholder="请填写QQ">
								</div>
								<div class="error-message"></div>
							</div>
						</div>

						<!-- 邮箱 -->
						<div class="form-row" data-field="email">
							<label class="form-label">邮箱</label>
							<div class="form-control">
								<div class="el-input">
									<input type="text" class="el-input__inner" placeholder="请填写邮箱">
								</div>
								<div class="error-message"></div>
							</div>
						</div>
					</div>

					<!-- 提交按钮 -->
					<div style="text-align: center;">
						<button type="button" class="el-button el-button--primary" id="submitBtn">
							<span>确认报名</span>
						</button>
					</div>
				</div>
			</div>
		</section>
	</div>

	<div id="footer"></div>
	<script src="./public/js/jquery.min.js"></script>
	<script src="./public/js/common.js"></script>
	<script src="./public/js/message.min.js"></script>
	<script src="./public/js/pagination.min.js"></script>
	<script src="./public/js/activity.js"></script>
</body>

</html>